<template>
      <div class="box_">
          <div class="box">
              <h2>发布公告</h2>
              <div class="bot_">
                  <input type="text" placeholder="标题" v-model="announcement.title">
                  <div contenteditable="true" class="content"  ref="edit" @focus="ess" style="word-break: break-all"></div>
                  <div>
                      <div class="function">
                          <div class="choose">
                              <img src="../../../public/static/biaoqing.png" alt="" title="表情" style="width:25px" @click="exp_s">
                              <div>
                                  <button style="margin-right: 20px" @click="switch_(1)" >取消</button>
                                  <button @click="switch_(0)">发布</button>
                              </div>
                          </div>
                          <div class="expression" v-show="expression" >
                              <ul >
                                  <li @click="expression_li($event)" v-for="item in expression_e" v-html="item"></li>
                              </ul>
                          </div>
                      </div>
                  </div>
              </div>
          </div>
      </div>
</template>

<script>
import api from "@/api";

export default {
    name: "AnnouncementEdit",
    data(){
        return{
            announcement:{
                title:"",
                content:"",
                publisher:"",
            },
            expression_e:['😀', '😄', '😁', '😅', '🤣', '🙂', '😉', '😊', '🥰', '😍', '😘', '🤑',
                '😚', '😑', '😏', '😪', '😎', '😾', '😭', '😓', '😖', '👋', '🤬', '😷',
                '🤒', '🤕', '🤢', '🤮', '🤧', '😇', '🤠', '🤡', '🤥', '🤫', '🤭', '🧐',
                '🤓', '😈', '👿', '👹', '👺', '💀', '👻', '👽', '🤖', '💣', '💩', '😺',
                '😸', '😹', '😻', '😼', '😽', '🙀', '😿', ],
            expression:false,
        }
    },
    mounted() {
        if(JSON.parse(window.localStorage.getItem("user"))){
            this.announcement.publisher = JSON.parse(window.localStorage.getItem("user")).username;
        }
    },
    methods:{
        expression_li(e){
            this.$refs.edit.innerHTML+= e.target.innerHTML
        },
        ess() {
            if(this.$refs.edit.innerHTML === "")
                this.$refs.edit.innerHTML = "";
        },
        exp_s() {
            this.expression = !this.expression;
        },
        switch_(index){
            if(index === 0) {
                this.announcement.content = this.$refs.edit.innerHTML;
                api.insertAdminAnnouncement(this.announcement).then((res)=>{
                    if(res.data.code===200){
                        this.$store.commit("requestInfo", "发布成功");
                        this.$store.commit("sys_announcement",this.announcement.content);
                    }else {
                        this.$store.commit("requestInfo", "发布失败");
                    }
                })
            }
            this.$emit("handleCommentSend");
        },
    }
}
</script>



<style scoped>
input{
    width: 100%;
    outline: none;
    height: 40px;
    padding: 5px;
}
h2{
    text-align: center;
    background: white;
    border: 1px solid #8f8c8c;
}
h3{
    background: white;
    width: 100%;
    height: 50px;
    background: #3586f1;
    z-index: 999999999;
}
.box_{
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: -200px;
    transform: translateX(-50%);
}
.box{
    width: 400px;
    background: #f9fafc;
    height: 30px;
}

.expression{
    width: 100%;
    margin-top: 10px;
    padding: 5px;
    animation: box .5s ease-in-out 0s 1 forwards;
    border-radius: 4px;
}
.expression ul{
    display: flex;
    flex-flow:row wrap;
    justify-content: space-around;
    align-items: center;
    padding-left: 0 !important;

}
.expression ul li{
    list-style: none;
    font-size: 28px;
}
.expression ul li:last-child{
    margin-right: auto !important;
}
.expression ul li:hover{
    cursor: pointer;
}

.function{
    width: 100%;
    min-height: 50px;
    padding: 0 10px;
    padding-top: 5px;
    text-align: center;
    background: #d5d0d0;
}
.choose{
    width: 100%;
    margin-top: 5px;
    line-height: 30px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
button{
    padding: 8px 10px;
    background: #3586f1;
    color: white;
    border:0;
}
button:hover{
    opacity: .9;
}
button:hover,img:hover{
    cursor: pointer;
}

.content{
    width: 100%;
    height: 150px;
    overflow: auto;
    color: #838080;
    padding: 10px;
    outline: none;
    background: #fcfafa;
    border: 1px solid #8f8c8c !important;

}
.bot_{
    border: 1px solid #8f8c8c;
    background: white;
}
</style>